<html>

	<head>
    	<title>todojo</title>

        <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js" djConfig="parseOnLoad:true, isDebug:false, debugContainerId: 'debugContainer'"></script>-->
		<script type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:false, debugContainerId: 'debugContainer'"></script>
		<script type="text/javascript" src="js/widgets.js"></script>

		<style type="text/css">
			@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css";
			@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dijit/themes/nihilo/nihilo.css";
			@import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/widget/Toaster/Toaster.css";
		</style>
		<link rel="stylesheet" href="styles/main.css" />

		<script type="text/javascript">

			// *** Dojo requires
			dojo.require("dojo.parser");
			dojo.require("dojo.data.ItemFileWriteStore");
			dojo.require("dijit.form.Button");
			dojo.require("dijit.form.Textarea");
			//dojo.require("dijit.form.ToggleButton");
			dojo.require("dijit.form.ValidationTextBox");
			dojo.require("dijit.layout.BorderContainer");
			dojo.require("dijit.layout.ContentPane");
			dojo.require("dijit.layout.TabContainer");
			dojo.require("dijit.Dialog");
		    dojo.require("dijit.Menu");
		    dojo.require("dijit.MenuBar");
		    dojo.require("dijit.MenuItem");
			dojo.require("dijit.MenuSeparator");
		    dojo.require("dijit.PopupMenuBarItem");
		    dojo.require("dijit.PopupMenuItem");
			dojo.require("dijit.Tooltip");
			dojo.require("dijit.Tree");
			dojo.require("dojox.widget.Toaster");

			// *** Initialization code
			dojo.addOnLoad( function() {
				initWidgets();
				hideLoader();
			});

		</script>

	</head>

	<body class="nihilo" role="application">

		<div id="preloader"></div>

		<!-- ******************************** Widget markup ********************************* -->

		<!-- Toaster widget -->
		<div dojoType="dojox.widget.Toaster" id="toaster_div" positionDirection="tr-down" duration="2500" messageTopic="ToasterTopic"></div>

		<!-- New Project dialog -->
		<div id="dlg_newProject" dojoType="dijit.Dialog" title="New Project" execute="submitNewProject(this); return true;">
			<table style="min-width: 300px">
			<tr><td><label for="npName">Name:</label></td></tr>
			<tr><td><input type="text" dojoType="dijit.form.ValidationTextBox" required="true" invalidMessage="Project name cannot be blank" name="npName" id="npName" /></td></tr>
			<tr><td><label for="npDesc">Description (optional):</label></td></tr>
			<tr><td><textarea name="npDesc" id="npDesc" dojoType="dijit.form.Textarea"></textarea></td></tr>
			<tr><td>&nbsp;</td></tr>
			<tr><td align="right">
				<button dojoType="dijit.form.Button" type="submit" onClick="return dijit.byId('dlg_newProject').isValid();">OK</button>
				<button dojoType="dijit.form.Button" onClick="closeNewProject();return false;">Cancel</button>
			</td></tr>
			</table>
		</div>

		<!-- Delete Project dialog -->
		<div id="dlg_deleteProject" dojoType="dijit.Dialog" title="Delete Project" execute="submitDeleteProject(); return true;">
			<input type="hidden" name="dpId" id="dpId" value="0" />
			<table style="min-width: 300px;">
			<tr><td align="center">Are you sure you wish to delete the following project and all of it's contents?</td></tr>
			<tr><th align="center"><center><b><span id="dpName">(name)</span></b></center></th></tr>
			<tr><td align="right">
				<button dojoType="dijit.form.Button" type="submit" onClick="return dijit.byId('dlg_deleteProject').isValid();">OK</button>
				<button dojoType="dijit.form.Button" onClick="closeDeleteProject();return false;">Cancel</button>
			</td></tr>
			</table>
		</div>

		<!-- New Task dialog -->
		<div id="dlg_newTask" dojoType="dijit.Dialog" title="New Task" execute="submitNewTask(this); return true;">
			<input type="hidden" id="ntProjectID" name="ntProjectID" value="0" />
			<input type="hidden" id="ntParentID" name="ntParentID" value="0" />
			<table style="min-width: 300px;">
			<tr><td>Name:</td></tr>
			<tr><td><input type="text" dojoType="dijit.form.ValidationTextBox" required="true" invalidMessage="Task name cannot be blank" name="ntName" id="ntName" /></td></tr>
			<tr><td>Description (optional):</td></tr>
			<tr><td><textarea name="ntDesc" id="ntDesc" dojoType="dijit.form.Textarea"></textarea></td></tr>
			<tr><td>&nbsp;</td></tr>
			<tr><td align="right">
				<button dojoType="dijit.form.Button" type="submit" onClick="return dijit.byId('dlg_newTask').isValid();">OK</button>
				<button dojoType="dijit.form.Button" onClick="closeNewTask();return false;">Cancel</button>
			</td></tr>
			</table>
		</div>
		
		<!-- Edit Task dialog -->
		<div id="dlg_editTask" dojoType="dijit.Dialog" title="Edit Task" execute="submitEditTask(); return true;">
			<input type="hidden" id="etTaskID" name="etTaskID" value="0" />
			<table style="min-width: 300px;">
			<tr><td>Name:</td></tr>
			<tr><td><input type="text" dojoType="dijit.form.ValidationTextBox" required="true" invalidMessage="Task name cannot be blank" name="etName" id="etName" /></td></tr>
			<tr><td>&nbsp;</td></tr>
			<tr><td align="right">
				<button dojoType="dijit.form.Button" type="submit" onClick="return dijit.byId('dlg_editTask').isValid();">OK</button>
				<button dojoType="dijit.form.Button" onClick="closeEditTask();return false;">Cancel</button>
			</td></tr>
			</table>
		</div>
		
		<!-- New Comment dialog -->
		<div id="dlg_newComment" dojoType="dijit.Dialog" title="Add Comment" execute="submitNewComment(); return true;">
			<input type="hidden" id="ncTaskID" name="ncTaskID" value="0" />
			<table style="min-width: 300px;">
			<tr><td>Comment:</td></tr>
			<tr><td><textarea name="ncContent" id="ncContent" dojoType="dijit.form.Textarea"></textarea></td></tr>
			<tr><td>&nbsp;</td></tr>
			<tr><td align="right">
				<button dojoType="dijit.form.Button" type="submit" onClick="return dijit.byId('dlg_newComment').isValid();">OK</button>
				<button dojoType="dijit.form.Button" onClick="closeNewComment();return false;">Cancel</button>
			</td></tr>
			</table>
		</div>

		<!-- Delete Task dialog -->
		<div id="dlg_deleteTask" dojoType="dijit.Dialog" title="Delete Task" execute="submitDeleteTask(); return true;">
			<input type="hidden" id="dtProjectID" name="dtProjectID" value="0" />
			<input type="hidden" id="dtNodeID" name="dtNodeID" value="0" />
			<table style="min-width: 300px;">
			<tr><td align="center">Are you sure you wish to delete the following task?</td></tr>
			<tr><th align="center"><center><b><span id="dtName">(name)</span></b></center></th></tr>
			<tr><td align="center">
				<center>
				<table id="dtOptionTable">
				<tr>
					<td><input type="radio" id="dtChildOption0" checked="checked" name="dtChildOption" value="0" /></td>
					<td>Delete all child tasks</td>
				</tr>
				<tr>
					<td><input type="radio" id="dtChildOption1" name="dtChildOption" value="1" /></td>
					<td>Move child tasks to parent</td>
				</tr>
				</table>
				</center>
			</td></tr>
			<tr><td align="right">
				<button dojoType="dijit.form.Button" type="submit" onClick="return dijit.byId('dlg_deleteTask').isValid();">OK</button>
				<button dojoType="dijit.form.Button" onClick="closeDeleteTask();return false;">Cancel</button>
			</td></tr>
			</table>
		</div>

		<!-- Project item context menu -->
		<div dojoType="dijit.Menu" id="projectItemMenu" style="display: none;">
			<div dojoType="dijit.MenuItem" onClick="console.log('open');">Open</div>
			<div dojoType="dijit.MenuItem" onClick="console.log('edit');">Edit</div>
			<div dojoType="dijit.MenuItem" onclick="showDeleteProject(); return true;">Delete</div>
		</div>

		<!-- Task list context menu -->
		<div dojoType="dijit.Menu" id="taskListMenu" toggle="fade" style="display: none;">
			<div dojoType="dijit.MenuItem" onClick="openTask( menu_taskList.attr('taskitem') );">Open</div>
			<div dojoType="dijit.MenuSeparator"></div>
			<div dojoType="dijit.MenuItem" onClick="showNewTask();">Add Task</div>	
			<div dojoType="dijit.MenuItem" onClick="showInsertTask();">Insert Task</div>
			<div dojotype="dijit.MenuSeparator"></div>
			<div dojoType="dijit.MenuItem" onClick="showEditTask();">Edit</div>	
			<div dojoType="dijit.MenuItem" onClick="showDeleteTask();">Delete</div>	
		</div>


		<!-- ******************************************************************************** -->

		<div id="logo">
			<img src="media/todojo-logo-small.png" />
			<img src="http://o.aolcdn.com/dojo/1.2/dojox/image/resources/images/loading.gif" id="loading" />
		</div>

		<!-- Main layout container -->
		<div dojoType="dijit.layout.BorderContainer" gutters="true" liveSplitters="true" id="borderContainer">
		
			<!-- Menu bar container -->
			<div dojoType="dijit.MenuBar" id="menuBar" region="top" splitter="false">

				<!-- Project menu -->
				<div dojoType="dijit.PopupMenuBarItem">
					<span>Project</span>
					<div dojoType="dijit.Menu" id="projectMenu">
						<div dojoType="dijit.MenuItem" onClick="dlg_newProject.show(); return false;">New Project</div>
						<div dojoType="dijit.MenuItem" onClick="displayProjects(); return false;">Open Project</div>
						<div dojoType="dijit.MenuItem" onClick="return false;">Close Project</div>
					</div>
				</div>

				<!-- Task menu -->
				<div dojoType="dijit.PopupMenuBarItem">
					<span>Tasks</span>
					<div dojoType="dijit.Menu" id="tasksMenu">
						<div dojoType="dijit.MenuItem" onClick="return false;">Add Task</div>
						<div dojoType="dijit.MenuItem" onClick="return false;">Insert Task</div>
						<div dojoType="dijit.MenuItem" onClick="return false;">Edit Task</div>
						<div dojoType="dijit.MenuItem" onClick="return false;">Delete Task</div>
					</div>
				</div>

			</div>

			<!-- Body content container -->
			<div dojoType="dijit.layout.ContentPane" region="center" id="bodyContainer">

				<!-- Main tab container -->
				<div dojoType="dijit.layout.TabContainer" style="width: 100%; height: 100%;" id="tabContainer">

					<div dojoType="dijit.layout.ContentPane" title="Welcome" selected="true" closable="true">
						Welcome to todojo!
					</div>

				</div>
				
			</div>

		</div>
		<!-- Dojo logo container -->
		<div id="dojologo"><img src="media/dojo-logo.png" /></div>


	

	</body>

</html>
